<template>
  <div class="datainitArea">
    <el-row class="goods-list-title"><h1>活动配置申请条件</h1> </el-row>
    <el-table  :data="tableData"   style="width: 100%"
      :header-cell-style="{'text-align':'center','color':'#2554ff'}"
      :cell-style="{'text-align':'center'}"
      v-loading="switchLoding"
     >
      <el-table-column label="申请入口条件筛选" prop="ruleName"></el-table-column>
      <el-table-column label="活动配置时可选项(点击修改)"> 
        <template #default="props">
          <div class="tag-pointer">
             <el-tag type="success" v-if="props.row.mystatus" @click="swichChangeBtn(props.row)" effect="dark" >启用中</el-tag>
              <el-tag type="danger"  @click="swichChangeBtn(props.row)" effect="dark" v-else>未开启</el-tag>
              </div>
          </template>
  </el-table-column>
  <el-table-column label="操作">
        <template #default="props">
          <el-button type="primary" @click="ruleEditBtn(props.row)"  size="small"><el-icon><edit/> </el-icon> 名称修改</el-button>
        </template>
  </el-table-column>
    </el-table>
  <el-dialog v-model="ruleEditVisible" title="名称修改">
      <el-input v-model="ruleName"></el-input>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="ruleEditVisible = false">取消</el-button>
            <el-button type="primary" @click="confirmEditRuleBtn">确定修改</el-button>
          </span>
        </template>
  </el-dialog>
   <el-dialog v-model="addRuleVisible" title="新增规则">
      <el-input v-model="addEuleRorm.ruleName"></el-input>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="addRuleVisible = false">取消</el-button>
            <el-button type="primary" @click="confirmAddRuleBtn">确定修改</el-button>
          </span>
        </template>
  </el-dialog>
 <el-row class="el-row-center margin-top-20"><el-button type="info" @click="addRuleVisible=true">新增规则</el-button> </el-row>
  </div>
</template>
<script lang="ts">
import { defineComponent,ref,onMounted, reactive,toRefs,toRef } from 'vue'
import{ApiGetRiskRules,ApiEditRiskRule,ApiAddRiskRule} from '@/api/index'
import { ElMessageBox } from "element-plus";
import { infoMessage ,successMessage} from '@/utils/messageTips';
import { useStore } from 'vuex';
export default defineComponent({
  name:'DataInit',
  setup(){
    let tableData= ref([])
    let switchLoding = ref<boolean>(false)
    let Btnvalue3 = ref<boolean>(true)
    const store = useStore()
    const AllVisible = reactive<Record<string,boolean>>({
          ruleEditVisible:false,
          addRuleVisible:false
    })
    let editRuleForm = reactive<IGEditRule>({
      id:0,
      ruleName:"",
      status:0
    })
   let addEuleRorm = reactive<IGAddRule>({
     status:1,
     ruleName:""
   })
  //  增加规则
  const confirmAddRuleBtn =async ()=>{
     const res = await ApiAddRiskRule(addEuleRorm)
     getRiskRules()
     successMessage("增加"+res.message)
     AllVisible.addRuleVisible = false
     store.dispatch('rulesconfig/asyncSetAllRules')

  }
  // 获取规则信息
    const getRiskRules = async ()=>{
      switchLoding.value= true
      const res = await ApiGetRiskRules() as Record<string,any>
      tableData.value = res.data.map((item:any)=>{
         return{
             ...item,
             mystatus:item.status===1?true:false
         }
      })
      switchLoding.value = false
    }
    // 状态修改
    const swichChangeBtn = async (info:any)=>{
      let statusVal = info.status?0:1
         ElMessageBox.confirm(`你确定修改配置状态吗吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
             const res  = await ApiEditRiskRule({
               id:info.id,
               ruleName:info.ruleName,
               status:statusVal
             })  as Record<string,any>
             getRiskRules()
             successMessage(res.message)
        })
        .catch(() => {
          infoMessage("您取消了修改");
        });

    }
  //  名称修改
   const ruleEditBtn = (info)=>{
     editRuleForm.status = info.status?1:0
     editRuleForm.id = info.id
     editRuleForm.ruleName = info.ruleName
     AllVisible.ruleEditVisible=true 
   }
   const confirmEditRuleBtn =async ()=>{
         const res = await ApiEditRiskRule(editRuleForm)
         getRiskRules()
         successMessage("修改"+res.message)
       AllVisible.ruleEditVisible = false
   }
    onMounted(()=>{
      getRiskRules()
    })

      return{
        Btnvalue3,
        tableData,
        swichChangeBtn,
        switchLoding,
        ruleEditBtn,
        ...toRefs(AllVisible),
      ...toRefs(editRuleForm),
        confirmEditRuleBtn,
        confirmAddRuleBtn,
        addEuleRorm
      }
  }
})
</script>
<style lang="less" scoped>
  .datainitArea{
    height: 100%;
    width: 100%;
  }
  .el-row{
    display: flex;
    justify-content: center;
  }
  .tag-pointer{
    cursor: pointer;
  }
  .goods-list-title {
  display: flex;
  justify-content: center;
  h1 {
    color: rgb(109, 135, 221);
    font-size: 20px;
  }
}
</style>